//these parentheses .Anonymous function to encapsulate the function code .
(function() {
	// 1- window is the mother object of the web page.
	/*
	 * 2-onload is an event listener method that trigger when the page is
	 * completely loaded. because if we not use this listener the script will be
	 * run before the document define the div so it will return null.
	 */
	window.onload = function() {
		var mapDiv = document.getElementById('map');// DOM method to get
		// container.
		var latlng = new google.maps.LatLng(28, 31);// latitude coordinate for
		// the center.
		// options for basic settings for initiating Google map.
		var options = {
			center : latlng,
			zoom : 6,
			mapTypeId : google.maps.MapTypeId.ROADMAP,
			disableDefaultUI : true,
			mapTypeControl : true,// make user control labels and terrain.
			scaleControl : true,
			streetViewControl : true,
			draggableCursor : 'move'
		};
		/*
		 * creating map object that takes 2 params : the TML container that hold
		 * the map,and the options to can initiate the map.
		 */
		var map = new google.maps.Map(mapDiv, options);

		// Adding a marker to the map
		var marker = new google.maps.Marker( {
			position : new google.maps.LatLng(28, 31),
			map : map,
			title : 'Click me',
			icon : 'icons/flag_green.png'
		});

		// Creating an InfoWindow with the content text: "Hello World"
		var infowindow = new google.maps.InfoWindow( {
			content : '<div class="info">info window</div>'
		});

		// Adding a click event to the marker
		google.maps.event.addListener(marker, 'click', function() {
			// Code to be run...
			// Calling the open method of the infoWindow
			/*this method take 3 params :the map that info window belong to.
			 * the object the that info window will be pinned to(marker).
			 and the info window object.*/
			infowindow.open(map, marker);
		});
	}
})();